<template>
  <view class="container">
    <view class="header">
      <!-- 返回按钮 -->
      <view
        
        @click="goBack"
      >
        <IconFont
          font-class-name="iconfont"
          class-prefix="icon"
          name="left"
          size="20"
          color="#000"
        />
      </view>
      <view class="text-[28rpx] font-bold">发布招聘信息</view>
      <view :style="{width: '20rpx', height: '20rpx'}"></view>
    </view>

    <view class="post-form">
      <view class="form-group">
        <text class="label">职位名称</text>
        <input
          type="text"
          v-model="formData.jobTitle"
          class="input"
          placeholder="例如：SMT技术员"
        />
      </view>

      <view class="form-group">
        <text class="label">公司名称</text>
        <input
          type="text"
          v-model="formData.company"
          class="input"
          placeholder="例如：中芯科技制造厂"
        />
      </view>

      <view class="form-group">
        <text class="label">工作地点</text>
        <input
          type="text"
          v-model="formData.location"
          class="input"
          placeholder="例如：松江区"
        />
      </view>

      <view class="form-group">
        <text class="label">经验要求</text>
        <input
          type="text"
          v-model="formData.experience"
          class="input"
          placeholder="例如：2年以上经验"
        />
      </view>

      <view class="form-group">
        <text class="label">薪资范围</text>
        <view class="salary-input flex items-center">
          <input
            type="number"
            v-model="formData.salaryMin"
            class="input flex-1"
            placeholder="最低薪资"
          />
          <text class="mx-[24rpx]">至</text>
          <input
            type="number"
            v-model="formData.salaryMax"
            class="input flex-1"
            placeholder="最高薪资"
          />
          <text class="ml-[24rpx]">/月</text>
        </view>
      </view>

      <view class="form-group">
        <text class="label">职位标签</text>
        <view class="tags-container flex flex-wrap gap-[20rpx]">
          <view
            v-for="(tag, index) in tags"
            :key="index"
            :class="['tag-option', { selected: tag.selected }]"
            @click="toggleTag(index)"
          >
            {{ tag.name }}
          </view>
        </view>
      </view>

      <view class="form-group">
        <text class="label">职位描述</text>
        <textarea
          v-model="formData.description"
          class="textarea"
          placeholder="请输入职位描述..."
        />
      </view>

      <nut-button class="submit-btn" @click="submitForm">发布招聘</nut-button>
    </view>

    <view class="preview">
      <text class="preview-title text-[28rpx] font-bold">预览效果</text>
      <view class="job-card">
        <text class="job-title text-[28rpx] font-bold">{{
          formData.jobTitle || "SMT技术员"
        }}</text>
        <text class="company-info text-[24rpx] text-[#666]">
          {{ formData.company || "中芯科技制造厂" }} ·
          {{ formData.location || "松江区" }} ·
          {{ formData.experience || "2年以上经验" }}
        </text>
        <text class="salary text-[32rpx] text-[#f44336] font-bold">
          ¥{{ formData.salaryMin || 6500 }}-{{ formData.salaryMax || 8500 }}/月
        </text>
        <view class="tags flex flex-wrap gap-[16rpx]">
          <text
            v-for="(tag, index) in selectedTags"
            :key="index"
            class="tag bg-[#f5f5f5] text-[#666] px-[16rpx] py-[8rpx] rounded-[8rpx] text-[24rpx]"
          >
            {{ tag }}
          </text>
        </view>
        <view
          class="footer flex justify-between text-[24rpx] text-[#999] mt-[20rpx]"
        >
          <text>2天前发布</text>
          <nut-button
            class="apply-btn bg-[#1976d2] text-white px-[30rpx] py-[10rpx] rounded-[8rpx] text-[28rpx]"
            >立即申请</nut-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const formData = ref({
  jobTitle: "",
  company: "",
  location: "",
  experience: "",
  salaryMin: "",
  salaryMax: "",
  description: "",
});

const tags = ref([
  { name: "两班倒", selected: false },
  { name: "包吃住", selected: false },
  { name: "年终奖金", selected: false },
  { name: "带薪年假", selected: false },
  { name: "五险一金", selected: false },
  { name: "周末双休", selected: false },
]);

const selectedTags = ref(["两班倒", "包吃住", "年终奖金", "带薪年假"]);

const toggleTag = (index) => {
  tags.value[index].selected = !tags.value[index].selected;
};

const submitForm = () => {
  // 简单的表单验证
  if (!formData.value.jobTitle || !formData.value.company) {
    showToast({ title: "请填写必填项", icon: "none" });
    return;
  }

  // 这里可以添加实际的提交逻辑
  showToast({ title: "发布成功", icon: "success" });
};
</script>

<style>
/* 保持与HTML相同的样式结构，但使用rpx单位 */
.container {
  width: 750rpx;
  max-width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 40rpx;
  height: 60rpx; /* 可根据实际高度调整 */
}

.header h1 {
  color: #333;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.post-form {
  background-color: white;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  margin-bottom: 8rpx;
  font-weight: bold;
  color: #555;
}

.input,
.textarea {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.salary-input {
  display: flex;
  align-items: center;
}

.salary-input span {
  margin: 0 24rpx;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag-option {
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  cursor: pointer;
  font-size: 24rpx;
}

.tag-option.selected {
  background-color: #e3f2fd;
  color: #1976d2;
}

.submit-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 24rpx 40rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  cursor: pointer;
  width: 100%;
  margin-top: 40rpx;
}

.preview {
  margin-top: 40rpx;
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.preview-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

.job-card {
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 30rpx;
  position: relative;
}

.job-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4rpx;
  background-color: #1976d2;
  border-radius: 12rpx 0 0 12rpx;
}

.job-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.company-info {
  color: #666;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.salary {
  color: #f44336;
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin: 20rpx 0;
}

.tag {
  background-color: #f5f5f5;
  color: #666;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.footer {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 24rpx;
  margin-top: 20rpx;
}

.apply-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 10rpx 30rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  cursor: pointer;
}
</style>
